<template>
    <lay-card width="1200" style="height: 800px">
      <lay-row space="20">
        <lay-col md="24">
          <lay-quote size="sm">
            <h3>Excel用例上传Blade平台</h3>
          </lay-quote>
        </lay-col>
      </lay-row>
      <lay-row space="20">
        <lay-col md="1"></lay-col>
        <lay-col md="11">
            <lay-form :model="params" ref="layFormRef4" required>
                <lay-form-item label="项目名称" prop="project">
                  <lay-select
                      v-model="params.project"
                      placeholder="请选择项目"
                      style="width: 100%"
                  >
                    <lay-select-option :value="unit" :label="unit" v-for="unit in projects"></lay-select-option>
                  </lay-select>
                </lay-form-item>
                <lay-form-item label="选择用例" prop="file">
                  <lay-upload v-model="file" field="file" :auto="false" type="normal">
                    <template #preview>
                      {{ file[0]?.name }}
                    </template>
                  </lay-upload>
                </lay-form-item>
                <lay-form-item label="用例类型" prop="caseType">
                  <lay-radio v-model="params.caseType" name="action" :value="'1'" label="非自动化"></lay-radio>
                  <lay-radio v-model="params.caseType" name="action" :value="'2'">
                    <span>自动化(上传后会自动绑定脚本和测试数据)</span>
                  </lay-radio>
                </lay-form-item>
                <lay-form-item label="HS域账号" prop="user">
                  <lay-input v-model="params.user" placeholder="请输入域账号"></lay-input>
                </lay-form-item>
                <lay-form-item label="账号密码" style="display: none;">
                  <lay-input v-model="params.pwd" type="password">></lay-input>
                </lay-form-item>
                <lay-form-item style="text-align: center;">
                  <lay-button type="normal" @click="submitFile">上传用例</lay-button>
                </lay-form-item>
                <lay-form-item label="上传进度">
                    <div style="height: 20px"></div>
                    <lay-progress
                        show-text="上传进度"
                        :percent="progress"
                    ></lay-progress>
                </lay-form-item>
            </lay-form>
        </lay-col>
        <lay-col md="1"></lay-col>
        <lay-col md="10">
          <QueryRecord></QueryRecord>
        </lay-col>
      </lay-row>
    </lay-card>
</template>

<script lang="ts">
export default {
    name: "UploadExcel"
}
</script>

<script lang="ts" setup>
import {onMounted, onUnmounted, reactive, ref} from "vue";
import {notify} from "../../../untils/tip";
import {layer} from "@layui/layer-vue";
import {queryProgressApi, queryProjects, uploadExcel} from "../../../api/fastApi/fastApi";
import QueryRecord from "./QueryRecord.vue";

onMounted(() => {
    queryProjectsApi();
})

const progressFlag = ref(false);
const projects = ref([]);
const active = ref(-1);
const progress = ref(0)
const file = ref([]);
const params = reactive({
    ip: '',
    user: '',
    pwd: '',
    project: '',
    caseType: '2'
})

const queryProjectsApi = async () => {
    let response = await queryProjects({});
    if(response.status === 200){
        projects.value = response.result;

    }
}

const countInsert = ref(0);
const timerInsert = ref();

const queryProgress = async () => {
    let {result, status, message} = await queryProgressApi({username: params.user});
    if(status === 200){
       progress.value = result
       if(result === 100){
          clearInterval(timerInsert.value);
          notify("success", '用例上传完成！')
       }
    }
    countInsert.value ++;
    if(countInsert.value > 300){
      clearInterval(timerInsert.value);
      notify("failed", "超时退出！")
    }
}

// 上传文件并解压
const layId = ref()
const submitFile = async () => {
  if(file.value.length === 0){
    notify("faild", "请选择文件！");
  }else if(params.user === '' || params.project === ''){
    notify("faild", "项目名称或用户名为空！");
  }else {
    const fn = file.value[0].name;
    if(fn.endsWith('.xlsx')){
      progressFlag.value = true;
      layId.value = layer.load(0, {time: 1000 * 60 * 10});
      progress.value = 0
      const formData = new FormData();
      formData.append('username', params.user);
      // formData.append('password', params.pwd);
      formData.append('project', params.project);
      formData.append('file', file.value[0]);
      formData.append('caseType', params.caseType);
      console.log(formData);
      let response = await uploadExcel(formData);
      layer.close(layId.value);
      if (response.result === true) {
        notify('success', response.message);
        countInsert.value = 0;
        timerInsert.value = setInterval(queryProgress, 2000)
      } else {
        notify('fail', response.message);
      }
    }else {
      notify('fail', "仅支持上传.xlsx 文件！");
    }
  }
};


// 销毁前清理定时任务
onUnmounted(() => {
  if(timerInsert.value){
    clearInterval(timerInsert.value);
  }
  timerInsert.value = ''
})
</script>

<style scoped>

</style>